<template>
  <section class="group-info-container bcl-bg">
    <div class="navbar flex flex-cc flex-rb">
      <div class="fz-17 fw-bold">
        {{ sharedContactState.currentGroup.name }}
      </div>

      <div>
        <div
          class="del-btn flex flex-cc hover click radius p-5"
          @click="unfavGroup"
        >
          <img src="@/kang/img/icon_delete.png" />
          <div class="cl-error fz-12">从通讯录中删除</div>
        </div>
      </div>
    </div>

    <div class="group-info">
      <img :src="sharedContactState.currentGroup.portrait" />
      <p>{{ sharedContactState.currentGroup.name }}</p>
    </div>

    <n-button class="submit-btn" type="primary" @click="chat">
      {{ $t('group.chat') }}
    </n-button>
  </section>
</template>

<script>
import store from '../../../store'
import Conversation from '../../../wfc/model/conversation'
import ConversationType from '../../../wfc/model/conversationType'
import wfc from '../../../wfc/client/wfc'

export default {
  name: 'GroupDetailView',
  props: {},
  data() {
    return {
      sharedContactState: store.state.contact,
    }
  },
  methods: {
    chat() {
      let conversation = new Conversation(
        ConversationType.Group,
        this.sharedContactState.currentGroup.target,
        0
      )
      store.setCurrentConversation(conversation)
      this.$router.replace('/home')
    },

    unfavGroup() {
      wfc.setFavGroup(
        this.sharedContactState.currentGroup.target,
        false,
        () => {
          this.sharedContactState.currentGroup = null
          store.reloadFavGroupList()
          $message.success('已删除')
        },
        (err) => {
          console.error('setFavGroup error', err)
        }
      )
    },
  },
}
</script>

<style lang="scss" scoped>
.del-btn {
  img {
    width: 20px;
    margin-right: 5px;
  }
}

.group-info-container {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-top-right-radius: var(--main-border-radius);
  border-bottom-right-radius: var(--main-border-radius);
  position: relative;
}

.group-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.group-info img {
  height: 120px;
  width: 120px;
  border-radius: var(--border-radius);
}

.group-info p {
  margin-top: 20px;
  font-size: 20px;
  margin-bottom: 100px;
}

.action-container {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}
</style>
